import React, { Component } from 'react';
import './Serch.scss'
import { good_search,good_hotsearch } from '../utils/api'
import {SearchBar } from 'antd-mobile'
import wu from '../../image/wu.png'
class Serch extends Component {
    constructor(props) {
        super(props)
        this.state = {
            num: 1,
            list: [],
            searchinput: '',
            hotSerchlist:[],
            searchlist: localStorage.getItem('searchlist') ? JSON.parse(localStorage.getItem('searchlist')) : []
        }
    }

    // getValue = (e) => {
    //     if (e.keyCode === 13) {
    //         let arr = this.state.searchlist
    //         arr.push(e)
    //         this.setState({
    //             searchlist: arr
    //         }, () => {
    //             localStorage.setItem('searchlist', JSON.stringify(this.state.searchlist))
    //         })
    //         good_search({ searchkey: e, page: 1, count: 6 }).then((res) => {
    //             if (res.data.list.length === 0) {
    //                 this.setState({
    //                     num: 0,
    //                     list: []
    //                 })
    //             } else {
    //                 this.setState({
    //                     list: res.data.list,
    //                     num: 1
    //                 })
    //             }
    //             console.log(res.data);
    //         })
    //     }
    // }

    componentDidMount(){
        good_hotsearch().then((res)=>{
            this.setState({
                hotSerchlist:res.data.list
            })
        })
    }
    getValue(e){
        if (e.keyCode === 13){
            let arr=this.state.searchlist
            arr.push(e)
            this.setState({
              searchlist:arr
            },()=>{
              localStorage.setItem('searchlist',JSON.stringify(this.state.searchlist))
            })
            good_search({searchkey:e,page:1,count:6}).then((res)=>{
              if(res.data.list.length===0){
                this.setState({
                  num:0,
                  list:[]
                })
              }else{
                this.setState({
                  list:res.data.list,
                  num:1
                })
              }
              console.log(res.data);
            })
        }
        
      }


    return() {
        this.props.history.go(-1)
    }
    render() {
        return (
            <div className='serch'>
                <div className="head">
                    <div className="hdtop">
                        <div className="hdlft">
                            <span className='iconfont icon-fanhui' onClick={() => { this.return() }}></span>
                        </div>
                        <div className="topz">搜索</div>
                        <div className="topr">
                            <div className='tb'>
                                <span className="iconfont icon-dian"></span> |
                                <span className="iconfont icon-icon-yuanxk
"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="sousuo">
                    {/* <input type="text" placeholder="搜索店铺内商品" onKeyDown={(e)=>this.getValue(e) } /> */}
                    <SearchBar placeholder='搜索店内商品' showCancelButton={()=>true} onSearch={(e)=>{this.getValue(e)}}/>
                    <span className="iconfont icon-sousuo"></span>
                    <div className="btn">取消</div>
                </div>
                <div className='zuijin'>
                    <p>最近搜索</p>
                    <span className='iconfont icon-shanchu'></span>
                </div>
                <div className="sousuoList">
                    {/* <div className="sbox">ss</div> */}
                </div>
                <div className='remen'>
                    <p>热门搜索</p>
                </div>
                <div className="remenList">
                    {
                        this.state.hotSerchlist.map((item,index)=>{
                            return(
                                <div className="sbox" key={index}>{item}</div>
                            )
                        })
                    }
                    
                </div>
                <div className="slt">
                  {
                    this.state.list.length>0&&(
                      this.state.list.map((item,index)=>{
                        return(
                          <div className="list" key={index}>
                            <img src={item.pic} alt="" />
                            <div className="name">{item.name}</div>
                            <div className="price">
                              <div className="name">{item.salesPrice.name}</div>
                              <div className="value">￥{item.salesPrice.value}</div>
                            </div>
                          </div>
                        )
                      })
                    )
                  }
                  <div className="emp" style={{display:this.state.num===0?'block':'none'}}>
                    <img src={wu} alt="" />

                  </div>
                </div>
            </div>
        );
    }
}

export default Serch;